<template>
  <div class="gender_box" @click="handleClick()">
    <span :class="['gd_icon',`g_${data.code}_${data.status}`]"></span>
    <span class="gd_text">{{data.text}}</span>
  </div>
</template>

<script>
export default {
  name: 'genderCom',
  props: {
    data: {
      type: Object,
      default: () => ({
        code: 1,
        status: 0,
        text: '男'
      })
    }
  },
  data () {
    return {}
  },
  watch: {},
  computed: {},
  methods: {
    handleClick: function () {
      this.$emit('click', this.data)
    }
  },
  created () {},
  mounted () {},
  destroyed () {}
}
</script>
<style lang="scss" scoped>
.gender_box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.gd_icon {
  height: 50px;
  width: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  margin-right: 15px;
}
.g_2_0 {
  background-image: url("/game/static/images/role/g_2_0.svg");
}
.g_2_1 {
  background-image: url("/game/static/images/role/g_2_1.svg");
}
.g_1_0 {
  background-image: url("/game/static/images/role/g_1_0.svg");
}
.g_1_1 {
  background-image: url("/game/static/images/role/g_1_1.svg");
}
</style>
